<template>
  <div style="height: 100%">
    <el-form
      ref="formRef"
      :label-width="160"
      :model="formData"
      :rules="rules"
      label-position="left"
    >
      <el-form-item :label="$t('personal.Benutzername')" prop="nickname">
        <el-input
          v-model="formData.nickname"
          :placeholder="$t('personal.Benutzernamenein')"
        />
      </el-form-item>
      <el-form-item :label="$t('personal.Mobiltelefonnummer')" prop="mobile">
        <el-input
          v-model="formData.mobile"
          :placeholder="$t('personal.Telefonnummerein')"
        />
      </el-form-item>
      <el-form-item :label="$t('personal.Geschlecht')" prop="gender">
        <el-radio-group v-model="formData.gender">
          <el-radio :label="1">{{ $t("personal.männlich") }}</el-radio>
          <el-radio :label="2">{{ $t("personal.weiblich") }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('personal.JobStudentenausweis')" prop="codeId">
        <el-input
          v-model="formData.codeId"
          :placeholder="$t('personal.Jobnummerein')"
        />
      </el-form-item>
      <el-form-item :label="$t('personal.Abteilung')" prop="deptId">
        <el-tree-select
          v-model="formData.deptId"
          :placeholder="$t('personal.gehören')"
          :data="deptList"
          filterable
          :render-after-expand="false"
        />
      </el-form-item>
    </el-form>
    <div>{{ $t("personal.prompt") }}</div>
    <div class="btn" style="margin-top: 2rem">
      <el-button v-throttle="submit" type="success" :loading="loading" plain>{{
        $t("personal.konservieren")
      }}</el-button>
      <el-button v-throttle="init" type="danger" plain>{{
        $t("personal.Zurücksetzen")
      }}</el-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
// 组件名称
defineOptions({ name: "BasicInfo" });
// 导入引用
import { listDeptOptions } from "@/api/dept";
import { ePersonalInfo } from "@/api/personal/types";
import { useUserStore } from "@/store/modules/user";
import { getUserForm } from "@/api/user";
import { epersonal } from "@/api/personal";
import { FormRules } from "element-plus";
// 设置常量
const userStore = useUserStore();
const emit = defineEmits(["fun"]);
const deptList = ref<OptionType[]>();
// 获取表单
const formRef = ref(ElForm);
// 加载
const loading = ref(false);

// 封装验证规则
function isvalidcodeid(codeid: string) {
  const reg = /^\d+$/;
  return reg.test(codeid);
}
function validatorcodeid(_rule: any, value: any, callback: any) {
  if (!value) {
    callback(new Error("学号/工号不能为空"));
  } else if (!isvalidcodeid(value)) {
    callback(new Error("学号/工号只能是数字类型"));
  } else {
    callback();
  }
}
// 规则
const rules = ref<FormRules>({
  nickname: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
  mobile: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
  gender: [{ required: true, message: "性别不能为空", trigger: "blur" }],
  codeId: [{ required: true, trigger: "blur", validator: validatorcodeid }],
  deptId: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
});

// 传数据
const formData = ref<ePersonalInfo>({});

/**
 * 获取部门下拉项
 */
async function getDeptOptions() {
  listDeptOptions().then((response) => {
    deptList.value = response.data;
  });
}

/**
 * 获取基础信息
 */
function getBasicInfo() {
  getUserForm(userStore.userId).then(({ data }) => {
    formData.value = data;
  });
}

/**
 * 修改信息
 */
function submit() {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      ElMessageBox.confirm("确认更改个人信息?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        loading.value = true;

        // 直接调用 并传递参数
        epersonal(formData.value)
          .then(() => {
            userStore.getInfo().then(() => {
              ElMessage.success("个人信息更新成功!");
            });
            // 更新兄弟组件
            emit("fun");
          })
          .finally(() => {
            loading.value = false;
            getBasicInfo(); // 回显数据
          });
      });
    }
  });
}

// 重置
function init() {
  // 重置回基础信息
  getBasicInfo();
  ElMessage.success("重置信息成功!");
}

onMounted(() => {
  // 进来就获取信息
  getDeptOptions();
  getBasicInfo();
});
</script>

<style scoped>
.btn {
  margin-bottom: 10px;
}

.el-input {
  width: 50%;
}

.el-input {
  width: 50%;
}
</style>
